<template>
    <div class="points-list">
        <div class="toolbar">
            <el-input
                v-model="searchKeyword"
                placeholder="请输入关键词搜索"
                clearable
                @input="handleSearch"
                style="width: 300px"
            >
                <template #prefix>
                    <el-icon><Search /></el-icon>
                </template>
            </el-input>
        </div>

        <el-table
            :data="pointsList"
            style="width: 100%"
            v-loading="loading"
        >
            <!-- <el-table-column prop="operateUserUUID" label="操作人" />
            <el-table-column prop="userUUID" label="被操作用户" /> -->
            <el-table-column prop="point" label="积分" width="100" />
            <el-table-column prop="pointWay" label="操作方式" width="100">
                <template #default="{ row }">
                    <el-tag :type="row.pointWay === 1 ? 'success' : 'danger'">
                        {{ row.pointWay === 1 ? '增加' : '减少' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="pointInformation" width="400px" label="积分信息" show-overflow-tooltip />
            <el-table-column prop="pointRoom" label="房间" show-overflow-tooltip />
            <el-table-column prop="giftUUID" label="礼物" show-overflow-tooltip />
            <el-table-column prop="updateTime" label="更新时间" width="180" />
            <el-table-column label="操作" width="150" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
                    <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog
            v-model="detailVisible"
            title="积分详情"
            width="500px"
        >
            <el-descriptions :column="1" border>
                <el-descriptions-item label="操作人">{{ currentPoint?.operateUserUUID }}</el-descriptions-item>
                <el-descriptions-item label="被操作用户">{{ currentPoint?.userUUID }}</el-descriptions-item>
                <el-descriptions-item label="积分">{{ currentPoint?.point }}</el-descriptions-item>
                <el-descriptions-item label="操作方式">
                    <el-tag :type="currentPoint?.pointWay === 1 ? 'success' : 'danger'">
                        {{ currentPoint?.pointWay === 1 ? '增加' : '减少' }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="积分信息">{{ currentPoint?.pointInformation }}</el-descriptions-item>
                <el-descriptions-item label="房间">{{ currentPoint?.pointRoom }}</el-descriptions-item>
                <el-descriptions-item label="礼物">{{ currentPoint?.giftUUID }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ currentPoint?.updateTime }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { List as GetList, Delete, details, type Points } from '@/apis/points'

// 状态变量
const loading = ref(false)
const detailVisible = ref(false)
const currentPoint = ref<Points>()
const pointsList = ref<Points[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchKeyword = ref('')

// 获取积分列表
const fetchList = async () => {
    loading.value = true
    try {
        const data = await GetList({
            page: currentPage.value,
            pageSize: pageSize.value,
            keyword: searchKeyword.value.trim()
        })
        pointsList.value = data.list
        total.value = data.total
    } catch (error) {
        console.error('获取积分列表失败:', error)
        ElMessage.error('获取积分列表失败')
    } finally {
        loading.value = false
    }
}

// 搜索处理
let searchTimer: NodeJS.Timeout | null = null
const handleSearch = () => {
    if (searchTimer) {
        clearTimeout(searchTimer)
    }
    searchTimer = setTimeout(() => {
        currentPage.value = 1 // 重置页码
        fetchList()
    }, 300)
}

// 查看详情
const handleDetail = async (row: Points) => {
    try {
        const detail = await details(row.uUID)
        currentPoint.value = detail
        detailVisible.value = true
    } catch (error) {
        console.error('获取积分详���失败:', error)
        ElMessage.error('获取积分详情失败')
    }
}

// 删除积分记录
const handleDelete = async (row: Points) => {
    try {
        await ElMessageBox.confirm('确定要删除该积分记录吗？', '提示', {
            type: 'warning'
        })
        await Delete(row.uUID)
        ElMessage.success('删除成功')
        fetchList()
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除失败:', error)
            ElMessage.error('删除失败')
        }
    }
}

// 分页处理
const handleSizeChange = (val: number) => {
    pageSize.value = val
    fetchList()
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val
    fetchList()
}

// 初始化
onMounted(() => {
    fetchList()
})
</script>

<style scoped lang="scss">
.points-list {
    .toolbar {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pagination-container {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
}
</style> 